<template>
  <div class="songlist">
    <div class="top">
      <div class="top-bg" :style="{ backgroundImage }"></div>
      <div class="left">
        <img-item :item="item"></img-item>
        <span>歌单</span>
      </div>
      <div class="right">
        <p>{{ songlist.name }}</p>
        <div class="creator">
          <img :src="creatorImg" alt="" />
          <span>{{ creator.nickname }}</span>
        </div>
      </div>
    </div>
    <div class="fanhui">
      <span class="iconfont icon-fanhui" @click="back()"></span>
    </div>
    <div class="content-list">
      <h3>歌单列表</h3>
      <span @click.stop="playall">播放全部</span>
      <music-list
        :musiclist="songlist.tracks"
        :shownum="true"
        @play="$emit('play', $event)"
        @isfull="isfull = $event"
      ></music-list>
      <comment-list :listid="listid"></comment-list>
    </div>
  </div>
</template>

<script>
import CommentList from "../components/CommentList.vue";
import ImgItem from "../components/ImgItem.vue";
import MusicList from "../components/MusicList.vue";
export default {
  components: { ImgItem, MusicList, CommentList },
  props: {
    listid: {
      typeof: String,
      default: "0",
    },
    currentMusic: {
      type: Object,
      define: () => {
        return null;
      },
    },
    playlist: {
      type: Array,
      define: () => {
        return [];
      },
    },
  },
  data() {
    return {
      item: {},
      songlist: [],
      creator: [],
      tracks: [],
      backgroundImage: "",
      creatorImg: "",
    };
  },
  methods: {
    playall() {
      this.tracks.forEach((item) => {
        this.$emit("play", item);
      });
    },
    back() {
      history.back();
    },
  },
  created() {
    this.axios.get("/playlist/detail?id=" + this.listid).then((res) => {
      let picUrl = res.playlist.coverImgUrl;
      let playCount = res.playlist.playCount;
      this.item = {
        picUrl,
        playCount,
      };
      this.songlist = res.playlist;
      let url = `url(
        https://music.163.com/api/img/blur/${this.songlist.coverImgId_str}?param=170y170
      )`;
      this.backgroundImage = url;
      this.creator = this.songlist.creator;
      let avatarImg = `${this.creator.avatarUrl}?imageView=1&type=webp&thumbnail=61x0`;
      this.creatorImg = avatarImg;

      this.tracks = res.playlist.tracks.map((item) => {
        item.song = {
          alias: item.alia,
          privilege: item.privilege,
          artists: item.ar,
          album: item.al,
        };
        return item;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.songlist {
  position: relative;
  .top {
    position: absolute;
    padding: 30px 0;
    width: 100%;
    height: 126px;
    overflow: hidden;
    &::after {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background: rgba(0, 0, 0, 0.3);
    }
    .top-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      filter: blur(20px);
      background-position: 50%;
      transform: scale(1.5);
    }
    .left {
      position: absolute;
      width: 126px;
      height: 126px;
      z-index: 5;
      padding-left: 15px;
      span {
        position: absolute;
        z-index: 10;
        top: 10px;
        left: 14px;
        padding: 0 8px;
        height: 17px;
        color: #fff;
        font-size: 9px;
        text-align: center;
        line-height: 17px;
        background-color: rgba(217, 48, 48, 0.8);
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
      }
    }
    .right {
      position: absolute;
      left: 158px;
      z-index: 5;
      p {
        display: inline-block;
        font-size: 17px;
        line-height: 1.3;
        color: #fefefe;
        height: 44px;
      }
      .creator {
        padding-top: 8px;
        img {
          width: 30px;
          border-radius: 50%;
          margin-right: 5px;
        }
        span {
          font-size: 14px;
          color: #fff;
          opacity: 0.7;
        }
      }
    }
  }
  .fanhui {
    text-align: center;
    position: absolute;
    font-size: 16px;
    line-height: 45px;
    z-index: 101;
    // color: red;
    color: #fff;
    span {
      position: absolute;
      left: 4px;
      top: -7px;
    }
  }
  .content-list {
    position: absolute;
    top: 185px;
    width: 100%;
    padding-bottom: 70px;
    h3 {
      font-size: 12px;
      color: #666;
      height: 23px;
      line-height: 23px;
      padding: 0 10px;
      background-color: #eeeff0;
    }
    span {
      position: absolute;
      top: 0;
      right: 10px;
    }
  }
}
</style>
